import { createFileRoute } from '@tanstack/react-router'
import { motion } from 'framer-motion'
import section3Image from '@/assets/images/about-us/section3-image.webp'
import section2Paibian from '@/assets/images/home/section2-paibian.webp'

export const Route = createFileRoute('/_no-auth/about-us/')({
  component: Text,
})

function Text() {
  return (
    <div className={'layout_top min-h-screen overflow-hidden bg-[#FAFAFA]'}>
      {/*  section1 */}
      <motion.div
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        transition={{ duration: 1 }}
        className={
          "layout relative bg-[url('@/assets/images/about-us/section1-bg.webp')]" +
          ' 3xl:pt-[13.3rem] bg-cover bg-no-repeat pt-[5.1875rem] pb-1 lg:pt-[15rem] lg:pb-4' +
          " lg:bg-[url('@/assets/images/about-us/section1-bg-pc.webp')]"
        }
      >
        <h1 className={'text-primary layout-h1 leading-line-1 font-bold'}>
          关于新佰时
        </h1>
        <div
          className={
            'bg-primary 3xl:text-[4.25rem] 3xl:px-[1.7rem] leading-line-2 relative z-10 mt-2 inline-block' +
            ' font-extralight' +
            ' lg:px-[1.9rem]' +
            ' lg:text-4xl' +
            ' px-[.8rem]' +
            ' text-2xl' +
            ' text-white'
          }
        >
          About
          <span className={'3xl:text-7xl font-bold lg:text-4xl'}> NBT</span>
        </div>
        {/*line*/}
        <ul
          className={
            '3xl:space-y-20 absolute right-0 bottom-0 flex w-full flex-col items-end space-y-10' +
            ' lg:space-y-16'
          }
        >
          <li
            className={'bg-primary layout-left right-0 h-[0.125rem] lg:h-3'}
          ></li>
        </ul>
      </motion.div>
      {/*section2*/}
      <div className={'layout py-16 lg:py-24'}>
        <motion.h2
          initial={{ opacity: 0, x: -80 }}
          whileInView={{ opacity: 1, x: 0 }}
          transition={{ duration: 1 }}
          className={
            'layout-h2 text-primary leading-line-1 mb-3 text-center font-bold'
          }
        >
          新佰时生物技术 <br />
          敬畏生命健康的本质和意义
        </motion.h2>
        <motion.p
          initial={{ opacity: 0, x: 80 }}
          whileInView={{ opacity: 1, x: 0 }}
          transition={{ duration: 1 }}
          className={
            'text-text-65 leading-line-1 3xl:text-2xl text-center lg:text-xl'
          }
        >
          以“脑电生物技术、医学细胞生物学、人工智能、脑机接口、数字疗法”等科创成果的价值转化，打造数字量化健康管理系统。标准化专业运营：健康检测、服务跟进、专业指导、自愈力管理、平衡调节。
        </motion.p>
      </div>
      {/*section3*/}
      <div className={'layout bg-[#F5F5F5] py-14'}>
        <ul className={'3xl:space-y-44 space-y-10 lg:space-y-24'}>
          <li className={'gap-20 lg:flex lg:items-start lg:justify-center'}>
            <img
              className={'3xl:w-[31.25rem] lg:w-[31.25rem]'}
              src={section2Paibian}
              alt='Paibian'
            />
            <div className={'mt-10 lg:mt-0'}>
              <div>
                <motion.h2
                  initial={{ opacity: 0 }}
                  whileInView={{ opacity: 1 }}
                  transition={{ duration: 1 }}
                  className={
                    'leading-line-1 3xl:text-3xl text-primary text-xl font-bold lg:text-2xl'
                  }
                >
                  数字量化健康管理
                  <br className={'lg:hidden'} />
                  <span className={'hidden lg:inline'}> </span>
                  项目孵化连锁运营
                </motion.h2>
              </div>
              <motion.div
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                transition={{ duration: 1.5 }}
              >
                <p
                  className={
                    'text-text-85 leading-line-1 mt-4 mb-8 text-sm lg:text-base'
                  }
                >
                  少年儿童成长期生理心理健康领域与学习和体质管理的专业测评与体质管理服务，以及成年人自愈力健管理与疲劳障碍平衡调节。
                </p>
                <p
                  className={'text-text-85 leading-line-1 text-sm lg:text-base'}
                >
                  并专业系统地为：企校、机构项目合作式的定向筛查健康指标预警服务；会员级的健康管理服务--健康观察指标检测与服务方案。
                </p>
              </motion.div>
            </div>
          </li>

          <li
            className={
              'gap-60 lg:flex lg:flex-row-reverse lg:items-start lg:justify-center'
            }
          >
            <img
              className={'3xl:w-[25.75rem] rounded-8 lg:w-[25.75rem]'}
              src={section3Image}
              alt='融合科创与实践应用的知识产权型'
            />
            <div className={'mt-10 lg:mt-0'}>
              <div>
                <motion.h2
                  initial={{ opacity: 0 }}
                  whileInView={{ opacity: 1 }}
                  transition={{ duration: 1 }}
                  className={
                    'leading-line-1 3xl:text-3xl text-primary mb-4 text-xl font-bold lg:text-2xl'
                  }
                >
                  融合科创与实践应用的知识产权型技术项目价值
                </motion.h2>
              </div>
              <motion.div
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                transition={{ duration: 1.5 }}
              >
                <p
                  className={'text-text-85 leading-line-1 text-sm lg:text-base'}
                >
                  1、BCI技术应用转化的脑电生物技术检测系统；
                  <br />
                  2、AI数字化技术赋能制作的学习内驱力家校俱乐部以系列化的家长科普课程与沙龙互动；
                  <br />
                  3、数字量化标准运营的健康管理训练中心（示范基地）用于项目连锁运营及创业创新平台搭建。
                </p>
                <p
                  className={
                    'text-text-85 leading-line-1 my-4 text-sm lg:my-8 lg:text-base'
                  }
                >
                  数字量化的管理训练中心（示范基地）：
                  闭环效应的价值运营，数字化的专业项目，包括：数字量化检测系统、自流转小程序APP、数字化专业课程等；数字化标准运营示范基地。
                </p>
                <p
                  className={'text-text-85 leading-line-1 text-sm lg:text-base'}
                >
                  少年儿童体质管理训练中心、M-SPA自愈力健康管理中心
                </p>
              </motion.div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  )
}
